<template>
  <div class="order">
    <header>
      <div class="top">
        <span>订单管理</span>
      </div>
      <div class="tab">
        <div v-for="(x,y) in tab" class="tab_box" @click="isTab(y)">
          <p :class="present == y?'':'selected'">{{x.text}}</p>
          <transition name="el-zoom-in-center">
            <p v-show="present == y"></p>
          </transition>
        </div>
      </div>
    </header>
    <div class="print">
      <div class="status">打印机已连接</div>
      <div class="switch">
        <span v-if="printVal">自动打印</span>
        <span v-else>手动打印</span>
        <van-switch v-model="checked" active-color="#FB4448" @change="print" />
      </div>
    </div>
    <div class="orderList" v-if="shopro_goods.length>0">
      <div class="box" v-for="(item,index) in shopro_goods" :key="index">
        <div class="top">
          <div class="orderNum">{{item.id}}</div>
          <div class="type" @click="play">外卖订单</div>
          <div class="status">待接单</div>
        </div>
        <div class="customer">
          <div class="icon">
            <img src="../../../static/img/business/local.png" alt="" />
          </div>
          <div class="userInfo">
            <div class="name">
              <span>{{item.name}}</span>
              <span>{{item.phone}}</span>
            </div>
            <div class="address">{{item.dispatching}}{{item.particular}}</div>
          </div>
          <div class="tel" @click="call(item.phone)">
            <img src="../../../static/img/business/tel.png" alt="" />
          </div>
        </div>
        <div class="goodsInfo">
          <div class="title">商品</div>
          <div class="remarks">
            <div class="remark">备注：</div>
            <div>尽快送达，不要迟到哦！尽快送达，不要迟到哦 尽快送达，不要迟到哦!</div>
          </div>
          <div class="title">商品(6)</div>
          <div class="goodsList">
            <div class="goodsBox">
              <div class="goods">{{item.title}}</div>
              <div class="goodsNum">×2</div>
              <div class="goodsPrice">￥{{item.price}}</div>
            </div>
<!--            <el-collapse-transition>-->
<!--              <div v-show="showInfo">-->
<!--                <div class="transition-box">-->
<!--                  <div class="goodsBox">-->
<!--                    <div class="goods">川湘辣子鸡（小份+米饭）</div>-->
<!--                    <div class="goodsNum">×2</div>-->
<!--                    <div class="goodsPrice">￥9.9</div>-->
<!--                  </div>-->
<!--                  <div class="goodsBox">-->
<!--                    <div class="goods">川湘辣子鸡（小份+米饭）</div>-->
<!--                    <div class="goodsNum">×2</div>-->
<!--                    <div class="goodsPrice">￥9.9</div>-->
<!--                  </div>-->
<!--                </div>-->
<!--              </div>-->
<!--            </el-collapse-transition>-->
            <p @click="showInfo = !showInfo" class="xjt">
              <span>{{showInfo?'收起':'展开更多'}}</span>
              <img :src="showInfo?'../../static/img/sjt111.png':'../../static/img/xiajiantou11.png'" alt="">
            </p>
          </div>
        </div>
        <div class="orderInfo">
          <div class="time">
            <span>下单时间：</span>
            <span>{{item.order_time | formatDate}}</span>
          </div>
          <div class="sn">
            <span>订单编号：</span>
            <span>{{item.orderid}}</span>
          </div>
          <div class="price">
            <span>订单总额</span>
            <span>￥{{item.total_price}}</span>
          </div>
        </div>
        <div class="btn" v-if="item.status == 1">
          <div class="refuse" @click="rejection(item.id)">拒绝</div>
          <div class="sure" @click="receiving_orders(item.id)">接单</div>
        </div>
        <div class="btn" v-if="item.status == 2">
          <div class="refuse" @click="printer(item.id)">打印小票</div>
          <div class="sure" @click="confirm_delivery(item.id)">确认送出</div>
        </div>
        <div class="btn" v-if="item.status == 3 || item.status == 5">
          <div class="sure" @click="toDetail(item.id)">查看详情</div>
        </div>
        <div class="btn" v-if="item.status == 6">
          <div class="refuse" @click="agree_refund(item.id)">拒绝</div>
          <div class="sure" @click="agree_to_refund(item.id)">同意退款</div>
        </div>
        <div class="btn" v-if="item.status == 7">
          <div class="sure">已退款</div>
        </div>
      </div>
    </div>
    <div class="empty" v-else>
      <div class="empty_img">
        <img src="../../../static/img/business/empty_order.png" alt="">
      </div>
      <p>暂无该类型的订单</p>
    </div>
    <div style="display: none">
      <audio id="audio" src="../../../static/music/order.mp3" autoplay></audio>
    </div>
  </div>
</template>

<script>
  import Vue from 'vue';
  import all from "../../components/ClientComponents/assemble/all";
  import { Switch } from 'vant';
  import {formatDate} from "../../methods/time";

  Vue.use(Switch);

  export default {
    name: "businessOrder",
    inject:["reload"],
    components:{
      all
    },
    filters: {
      formatDate(time) {
        time = time * 1000;
        let date = new Date(time);
        return formatDate(date, 'yyyy年MM月dd日 hh:mm')
      },
    },
    data() {
      return {
        tab: [
          {text: '新订单',status:1},
          {text: '待配送',status:2},
          {text: '配送中',status:3},
          {text: '已完成',status:5},
          {text: '退款/售后',status:6},
          {text: '退款成功',status:7}
        ],
        status:1,
        shopro_goods:[],
        isLoading: false,
        checked: true,
        present: 0,
        printVal:true,
        showInfo:false,
        showInfo1:false,
        store_info:false,
        self_motion:false,
        tel:17391751754
      }
    },
    created() {
      this.store_info = JSON.parse(localStorage.getItem("storeInfo"));
      this.order(1);
      this.$myAxios('index/Order/self_motion_check', 'post', {
        mid:this.store_info.id,
      }).then(res => {
        console.log(res.data.state);
        if(res.data.state == 1){
          console.log(res.data.manystore);
          if(res.data.manystore.self_motion == "yes"){
            this.self_motion = true
          }
        }else{
          this.$myNotice('网络中断，刷新重试',1500)
        }
      });
      this.$myAxios('index/Order/printer_check', 'post', {
        mid:this.store_info.id,
      }).then(res => {
        console.log(res.data.state);
        if(res.data.state == 1){
          if(res.data.printer.allocation =="open"){
            this.checked = true
          }else{
            this.checked = false
          }
        }else{
          this.$myNotice('网络中断，刷新重试',1500)
        }
      });
    },
    mounted() {
      this.play();
    },
    methods: {
      back() {
        this.$router.back();
      },
      toDetail(id){
        this.$router.push({
          path:"/views/Business/orderDetail",
          query:{id:id}
        })
      },
      play(){
        let audio =document.querySelector('#audio');
        audio.play();
      },
      receiving_orders(id){
        this.$myAxios('index/Order/receiving_orders', 'post', {
          order_id:id,
          status:2
        }).then(res => {
          console.log(res.data.state)
          if(res.data.state == 1){
            this.$myNotice('接单成功，请尽快配送',1500);
            this.reload()
          }else{
            this.$myNotice('网络中断，刷新重试',1500)
          }
        });
      },
      rejection(id){
        this.$myAxios('index/Order/rejection', 'post', {
          order_id:id,
        }).then(res => {
          console.log(res.data.state);
          if(res.data.state == 1){
            this.$myNotice('已拒绝该订单',1500);
            this.reload()
          }else{
            this.$myNotice('网络中断，刷新重试',1500)
          }
        });
      },
      confirm_delivery(id){
        this.$myAxios('index/Order/confirm_delivery', 'post', {
          order_id:id,
        }).then(res => {
          console.log(res.data.state);
          if(res.data.state == 1){
            this.$myNotice('已送出',1500);
            this.reload()
          }else{
            this.$myNotice('网络中断，刷新重试',1500)
          }
        });
      },
      agree_refund(id){
        this.$myAxios('index/Order/agree_refund', 'post', {
          order_id:id,
        }).then(res => {
          console.log(res.data.state);
          if(res.data.state == 1){
            this.$myNotice('成功拒绝',1500);
            this.reload()
          }else{
            this.$myNotice('网络中断，刷新重试',1500)
          }
        });
      },
      agree_to_refund(id){
        this.$myAxios('index/Order/agree_to_refund', 'post', {
          order_id:id,
        }).then(res => {
          console.log(res.data.state);
          if(res.data.state == 1){
            this.$myNotice('已退回原账户',1500);
            this.reload()
          }else{
            this.$myNotice('网络中断，刷新重试',1500)
          }
        });
      },
      order(status){
        this.status = status;
        this.$myAxios('index/Order/manystore_check', 'post', {
          mid:this.$store.state.storeInfo.id,
          status:status,
        }).then(res => {
          console.log(res.data[0].state)
          if(res.data[0].state == 1){
            this.shopro_goods = res.data[0].shopro_goods
          }
        });
      },
      onRefresh() {
        setTimeout(() => {
          this.$toast('刷新成功');
          this.isLoading = false;
        }, 1000);
      },
      print(value){
        if(value){
          this.printVal = true;
          this.$myAxios('index/Order/allocation', 'post', {
            mid:1,
            allocation:'open',
          }).then(res => {
            console.log(res.data.state)
            if(res.data.state == 1){
              this.$myNotice('已开启自动打印',1500)
            }
          });
        }else{
          this.printVal = false;
          this.$myAxios('index/Order/allocation', 'post', {
            mid:1,
            allocation:'shut',
          }).then(res => {
            console.log(res.data.state);
            if(res.data.state == 1){
              this.$myNotice('已关闭自动打印',1500)
            }
          });
        }
      },
      printer(id){
        this.$myAxios('index/Order/operation', 'post', {
          id:id
        }).then(res => {
          this.$myNotice('打印成功',1500)
        });
      },
      isTab(index){
        this.present = index;
        this.order(this.tab[index].status)
      },
      call(phone){
        // 调用拨号功能
        window.location.href = 'tel://' + phone;
      },
    },
    watch: {
      $route(to, from) {
        this.present = to.path;
      }
    }
  }
</script>

<style scoped>
  .order{
    background: #F5F5F5;
    min-height: 5.7rem;
    padding-top: .96rem;
  }

  header {
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 88;
    flex-flow: row;
    box-sizing: border-box;
  }
  header .top{
    height: .5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: linear-gradient(170deg,rgba(251,68,72,1) 0%,rgba(254,111,77,1) 100%);
    padding: 0 .1rem;
  }
  header > div > img {
    width: .11rem;
    height: .18rem;
  }

  header > div > span {
    font-size: .18rem;
    font-weight: 500;
    color: #ffffff;
    flex-grow: 1;
    text-align: center;
  }

  /* 订单分类部分 */
  .tab {
    width: 3.75rem;
    white-space: nowrap;
    overflow-y: hidden;
    overflow-x: scroll;
    display: -webkit-box;
    max-height: .45rem;
    display: flex;
    flex-flow: row;
    justify-content: space-between;
    /*align-items: center;*/
    background-color: #ffffff;
  }
  .tab::-webkit-scrollbar {
    display:none
  }
  .tab_box {
    height: 100%;
    max-height: .55rem;
    padding: 0 .1rem;
    /*align-items: center;*/
    text-align: center;
  }

  .tab_box > p:nth-child(1) {
    color: #FB4448;
    font-size: .16rem;
    line-height: .16rem;
    padding: .15rem 0 .13rem;
  }

  .tab_box > p:nth-child(2) {
    width: 100%;
    height: .02rem;
    background-color: #FF300D;
    border-radius: .01rem;
  }


  .el-loading-spinner {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    min-height: 5rem;
  }

  .selected {
    color: #333333 !important;
    font-size: .16rem !important;
  }

  .orderList{
    padding-bottom: .44rem;
  }
  .print{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: .13rem;
  }
  .print .status{
    font-size: .15rem;
    color: #333333;
  }
  .switch{
    display: flex;
    align-items: center;
  }
  .switch span{
    margin-right: .14rem;
    color: #999999;
    font-size: .15rem;
  }
  >>>.van-switch{
    font-size: .2rem;
  }

  .box {
    width: 3.53rem;
    box-sizing: border-box;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0 .03rem .15rem 0 rgba(4, 0, 0, 0.15);
    border-radius: .04rem;
    margin: 0 auto .16rem;
    overflow: hidden;
  }
  .top{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: .1rem .1rem;
    background: #FAFAFA;
  }
  .orderNum{
    border-radius: .02rem;
    background:linear-gradient(81deg,rgba(251,68,72,1) 0%,rgba(254,111,77,1) 100%);
    padding: .02rem .1rem;
    color: #ffffff;
    font-size: .17rem;
  }
  .type{
    font-size: .14rem;
    margin-left: .08rem;
    border: .01rem solid #FB4448;
    color: #FB4448;
    border-radius: 3rem;
    padding: .01rem .1rem;
  }
  .top .status{
    flex-grow: 1;
    text-align: right;
    font-size: 0.16rem;
    color: #FB4448;
  }
  .customer{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.14rem .1rem;
  }
  .userInfo{
    flex-grow: 1;
    margin-left: .1rem;
  }
  .name{
    font-size: .15rem;
    color: #333333;
  }
  .name span{
    margin-right: .14rem;
  }
  .address{
    font-size: .14rem;
    color: #666666;
    margin-top: .04rem;
  }
  .icon{
    width: .18rem;
  }
  .tel{
    width: .28rem;
    margin-right: .12rem;
  }
  .goodsInfo{
    padding: .1rem;
    border-top: 1px solid #EBEBEB;
  }
  .title{
    font-size: .15rem;
  }
  .remarks{
    background: #F4F4F4;
    padding: .1rem;
    margin-top: .06rem;
    display: flex;
    font-size: .13rem;
    color: #666666;
  }
  .remark{
    color: #FB4448;
    width: .6rem;
  }
  .goodsList{

  }
  .goodsBox{
    display: flex;
    justify-content: space-between;
    margin-top: .1rem;
  }
  .goods{
    flex-grow: 1;
  }
  .goodsNum{
    width: .6rem;
  }

  .xjt {
    display: flex;
    flex-flow: row;
    align-items: center;
    justify-content: center;
    padding-top: 0.18rem;
  }
  .xjt>img {
    width: .12rem;
    height: .07rem;
    margin-left: .1rem;
  }
  .xjt>span {
    font-size:.13rem;
    font-family:PingFang SC;
    font-weight:500;
    color: #666666;
  }

  .orderInfo{
    padding: .1rem;
    border-top: 1px solid #EBEBEB;
    border-bottom: 1px solid #EBEBEB;
  }
  .sn{
    margin: .1rem 0;
  }
  .price{
    display: flex;
    justify-content: space-between;
  }
  .price>span:nth-child(2){
    margin-right: .15rem;
    font-size: .18rem;
    color: #FB4448;
    font-weight: bold;
  }
  .btn{
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: .12rem 0;
  }
  .refuse{
    border: 1px solid #FB5256;
    color: #FB5256;
    font-size: .15rem;
    width: .83rem;
    height: .34rem;
    line-height: .36rem;
    border-radius: .18rem;
    text-align: center;
    margin-right: .12rem;
  }
  .sure{
    background: linear-gradient(0deg,rgba(251,68,72,1) 0%,rgba(254,111,77,1) 100%);
    width: 1.15rem;
    height: .36rem;
    line-height: .36rem;
    border-radius: .18rem;
    color: #ffffff;
    text-align: center;
    margin-right: .1rem;
    font-size: .15rem;
  }
  .empty{
    width: 1.6rem;
    margin: .5rem auto 0;
  }
  .empty img{
    width: 100%;
  }
  .empty p{
    text-align: center;
    line-height: .6rem;
    font-size: .15rem;
    color: #999999;
  }
</style>
